<template>
	<view class="pl15 pr15">
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">宿舍区</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt15 width-33" v-for="(item,index) in ggqyDataStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{ggqyData[index]}}</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">1号楼</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt15 width-33" v-for="(item,index) in oneBuildStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{oneBuildData[index]}}</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">2号楼</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt15 width-33" v-for="(item,index) in twoBuildStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{twoBuildData[index]}}</view>
				</view>
			</view>
		</view>
		<view class="item_box mb15 p15">
			<view class="d-flex a-center">
				<view class="line"></view>
				<view class="title ml5">3号楼</view>
			</view>
			<view class="d-flex flex-wrap mt5">
				<view class="d-flex a-center mt15 width-33" v-for="(item,index) in threeBuildStatus" :key="index">
					<view class="mr5" :class="classroomDataStatus[item.socketColor]"></view>
					<view class="point_title">{{threeBuildData[index]}}</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		queryOneMainPageWorkByAppStatus,
		queryTwoMainPageWorkByAppStatus,
		queryThreeMainPageWorkByAppStatus,
		queryFourMainPageWorkByAppStatus,
	} from "@/api/electrician/index.js"

	export default {
		data() {
			return {
				timeout: [],

				ggqyData: ['1号楼东区总开1', '1号楼东区总开2', '1号楼西区总开', '2号楼东区总开1',
					'2号楼东区总开2', '2号楼西区总开', '3号楼东区总开', '3号楼西区总开'
				],
				oneBuildData: ["1层东区总开1", "1层东区总开2", "1层西区总开", "2层东区总开1", "2层东区总开2", "2层西区总开", "3层东区总开1",
					"3层东区总开2", "3层西区总开", "4层东区总开1", "4层东区总开2", "4层西区总开", "5层东区总开1", "5层东区总开2", "5层西区总开",
				],
				twoBuildData: ["1层东区总开1", "1层东区总开2", "1层西区总开", "2层东区总开1", "2层东区总开2", "2层西区总开", "3层东区总开1",
					"3层东区总开2", "3层西区总开", "4层东区总开1", "4层东区总开2", "4层西区总开", "5层东区总开1", "5层东区总开2", "5层西区总开",
				],
				threeBuildData: ["1层东区总开", "1层西区总开", "2层东区总开", "2层西区总开", "3层东区总开", "3层西区总开",
					"4层东区总开", "4层西区总开", "5层东区总开", "5层西区总开",
				],

				classroomDataStatus: ['point_info', 'point_success', 'point_danger', 'point_blue', 'point_warning', 'point_red',
					'point_orange'
				],
				ggqyDataStatus: [],
				oneBuildStatus: [],
				twoBuildStatus: [],
				threeBuildStatus: [],
			}
		},
		mounted() {
			this.queryOneMainPageWorkByAppStatus()
			this.queryTwoMainPageWorkByAppStatus()
			this.queryThreeMainPageWorkByAppStatus()
			this.queryFourMainPageWorkByAppStatus()

			// this.setupTimer()
		},
		methods: {
			doRefresh() {
				this.queryOneMainPageWorkByAppStatus()
				this.queryTwoMainPageWorkByAppStatus()
				this.queryThreeMainPageWorkByAppStatus()
				this.queryFourMainPageWorkByAppStatus()
			},
			
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryOneMainPageWorkByAppStatus()
					_this.queryTwoMainPageWorkByAppStatus()
					_this.queryThreeMainPageWorkByAppStatus()
					_this.queryFourMainPageWorkByAppStatus()
				}, 10000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
						item = null
					})
				}
			},
			async queryOneMainPageWorkByAppStatus() {
				await queryOneMainPageWorkByAppStatus().then(res => {
					this.ggqyDataStatus = res.object
				})
			},
			async queryTwoMainPageWorkByAppStatus() {
				await queryTwoMainPageWorkByAppStatus().then(res => {
					this.oneBuildStatus = res.object
				})
			},
			async queryThreeMainPageWorkByAppStatus() {
				await queryThreeMainPageWorkByAppStatus().then(res => {
					this.twoBuildStatus = res.object
				})
			},
			async queryFourMainPageWorkByAppStatus() {
				await queryFourMainPageWorkByAppStatus().then(res => {
					this.threeBuildStatus = res.object
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/static/css/floor.css");
</style>